<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 模式选择页 -->
<template>
    <div class="mode_container">
        <HeadLine :headName="$t('BDT_fascialgun_mode_select')" @backClick="backClick"/>

        <div class="main_box" :style="style">
            <div class="banner_line" :class="{'rtl-l': $rtl}">
                图片区
            </div>
            <ModeSelection
                :modeList="modeList"
                :modeBtn="false"
            />
            <RecommendUsage
                :headTypeList="headTypeList"  
            />
            <ProgramIntroduce :textObj="textObj"/>
        </div>
    </div>
</template>

<script>
import HeadLine from "@/components/HeadLine.vue";
import ModeSelection from "@/components/ModeSelection.vue";
import RecommendUsage from "@/components/RecommendUsage.vue";
import ProgramIntroduce from "@/components/ProgramIntroduce.vue";
import { mapState } from 'vuex';

export default {
    components:{
        HeadLine,
        ModeSelection,
        RecommendUsage,
        ProgramIntroduce
    },
    data(){
        return {
            modeList: [],
            headTypeList: [
                {
                    icon: require("@/assets/image/device.png"),
                    name: 'U型头'
                },
                {
                    icon: require("@/assets/image/device.png"),
                    name: '环形头'
                },
                {
                    icon: require("@/assets/image/device.png"),
                    name: '锥形头'
                },
                {
                    icon: require("@/assets/image/device.png"),
                    name: '平扁头'
                }
            ],
            style: {
                marginTop: (px2rem(window.topHeight)+5.6) + 'rem'
            },
            textObj: {  //文本展示内容
                title: '程序介绍',
                tips: [
                    {
                        value: '程序介绍文本内容'
                    }
                ],
            }
        }
    },
    computed:{
        ...mapState([ 'storeModeList' ])
    },
    mounted(){
        this.modeList = this.storeModeList;
    },
    methods:{
        //返回
        backClick(){
            this.$router.go(-1);
        }
    }
}
</script>

<style scoped>
    .main_box{
        padding: .8rem 1.2rem 0;
        position: fixed;
        top: 0;
        left: 0;
        width: -webkit-fill-available;
        height: -webkit-fill-available;
        overflow: hidden scroll;
    }

    .banner_line{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 18rem;
        background: #ddd;
        font-size: 2.4rem;
        border-radius: 1.6rem;
    }
</style>